<template>
    <div style="margin: 10px;padding: 10px; width: 100%;background-color: #FFF;border-radius: 10px;overflow-y: auto;" class="container">
        <el-row>
            <el-col :span="4">
              <div class="container">
                <el-form v-model="formdata">
                <el-form-item label="订单号" style="font-size: 10px !important;">
                  <el-input v-model="formdata.orderCode" placeholder="输入订单号"></el-input>
                </el-form-item>
                <el-form-item label="订单时间">
                  <el-col :span="11">
                    <el-date-picker type="date" placeholder="选择日期" v-model="formdata.createTime" style="width: 100% !important;"></el-date-picker>
                  </el-col>
                </el-form-item>
                <el-button @click="searchorder">搜索</el-button>
                <el-button @click="cleanorder">清空</el-button>
              </el-form>
              </div>

              <el-tabs :tab-position="tabPosition" @tab-click="handleClick">
                 <el-tab-pane v-for="(item,index) in this.orderdata" :label="item.orderCode" :orderCode="item.orderCode" :index="index" v-if="orderdata.length>0"> 
                </el-tab-pane>
                <el-tab-pane v-else-if="orderdata.length==0" label="无订单数据">无订单数据</el-tab-pane>
                <el-link type="primary" class="onecn" @click="upPage">上一页</el-link>
                <el-link type="primary" class="onecn" @click="nextPage">下一页</el-link>
              </el-tabs>
              
            </el-col>

            <el-col :span="19">
              <div class="box-body">
                <h2 v-if="orderdata.length>0">{{ orderdata[index].orderCode }}</h2>
                <h2 v-else-if="orderdata.length==0">无订单数据</h2>
                <div v-if="orderdata.length>0" class="cardBox" style="border: 1px solid #ccc;width: 50%;padding: 10px;">
                   <el-row class="carBox-one">
                       <el-col :span="11">
                          <h4>订单人：{{orderdata[index].orderName}}</h4>
                       </el-col>
                       <el-col :span="11">
                          <h4>订单时间：{{orderdata[index].createTime}}</h4>
                       </el-col>
                   </el-row>
                   <el-row class="carBox-two">
                       <el-col :span="11">
                          <h4>订单数量：{{orderdata[index].orderNum}} (件)</h4>
                       </el-col>
                       <el-col :span="11">
                          <h4>订单费用：{{orderdata[index].price}} (元)</h4>
                       </el-col>
                   </el-row>
                   <el-row class="carBox-three">
                       <el-col :span="11">
                          <h4>订单重量：{{ orderdata[index].weight}} (kg)</h4>
                       </el-col>
                       <el-col :span="11">
                          <h4>备注：{{ orderdata[index].remark }}</h4>
                       </el-col>
                   </el-row>
                   <el-row class="carBox-three">
                   </el-row>
                   <!-- <h4>状态：
                    <span v-if="orderdata[index].status==0" style="color: red;">未处理</span>
                    <span v-else-if="orderdata[index].status==1" style="color: blue;">已完成</span>
                  </h4> -->
                </div>
                  <h3 style="color: #409EFF;">订单详情</h3>
                  <el-button type="primary">已处理</el-button>
                  <el-table
    :data="data.filter(data => !search || data.vageName.toLowerCase().includes(search.toLowerCase()))"
    style="width: 100%" @selection-change="handleSelectionChange">
    <el-table-column
      type="selection"
      width="55">
    </el-table-column>
    <el-table-column prop="imgUrl" label="图片" >
       <!-- 图片的显示 -->
       <template slot-scope="scope">            
          <img :src="scope.row.imgUrls" min-width="70" height="70"/>
       </template>         
    </el-table-column>
    <el-table-column
      label="品类"
      prop="vageName">
    </el-table-column>
    <el-table-column
      label="价格"
      prop="price">
    </el-table-column>
    <el-table-column
      label="重量(kg)"
      prop="weight">
    </el-table-column>
    <el-table-column label="数量" prop="orderNum">
    </el-table-column>
    <el-table-column
      label="时间"
      prop="createTime">
    </el-table-column>
    <el-table-column
      label="类型"
      prop="createTime">
      <template slot-scope="scope">
        <el-tag type="success" >{{ scope.row.packingStyle==0?'袋装':'箱装' }}</el-tag>  
      </template>
    </el-table-column>
    <el-table-column
      align="right">
      <template slot="header" slot-scope="scope">
        <el-input
          v-model="search"
          size="mini"
          placeholder="输入关键字搜索"/>
      </template>
    </el-table-column>
  </el-table>
                </div>
            </el-col>
        </el-row>
    </div>
</template>

<script>
import {getList,getOrderDetail,getlistdata} from "@/api/system/order";
import {setStore, getStore} from '@/util/store';

export default{
    data(){
        return{
            tabPosition: 'left',
            userId:parseInt(getStore({name: 'userInfo'}).userId),
            roleId:parseInt(getStore({name: 'userInfo'}).roleId),
            orderdata:[],
            formdata:{
              orderCode:''
            },
            search:'',
            indexCode:"",
            index:0,
            data:[],
            loading:false,
            page: {
              pageSize: 10,
              currentPage: 1,
              total: 1
            },
        }
    },
    created(){
      this.getlistdata();
    },
    methods:{
      handleSelectionChange(val){
         console.log(val);
      },
      nextPage(){
        //下一页
        console.log(this.page);
        if(this.page.currentPage*this.page.pageSize<this.page.total){
          this.page.currentPage += 1; 
          this.index=0;
          this.getlistdata();
        }else{
          this.$message.success("已是最后一页");
        }
      },
      upPage(){
        //上一页 
        if(this.page.currentPage>1){
          this.page.currentPage -= 1;
          this.index=0;
          this.getlistdata(); 
        }else{
          this.$message.success("已是第一页");
        }
      },
      getlistdata(){
        var obj={
          userId:this.userId,
          roleId:this.roleId,
          orderCode:this.formdata.orderCode,
        }
        getlistdata(this.page.currentPage,this.page.pageSize,Object.assign(obj, this.query)).then(res=>{
            console.log(res);
            if(res.data.code==200){
              this.orderdata = res.data.data.data;
              this.page.total = res.data.data.count;
              this.data = res.data.data.data[this.index].children;
            }else{
              this.$message.error("系统繁忙,刷新尝试");
            }
        })
      },
      searchChange(params, done){
        console.log(params);
          this.page.currentPage = 1;
          this.onload(this.page,params);
          done();
        },
        searchReset() {
          this.parentId = 0;
          this.onload(this.page,{});
        },
        currentChange(currentPage){
          this.page.currentPage = currentPage;
        },
        sizeChange(pageSize) {
          this.page.pageSize = pageSize;
        },
      handleClick(item){
        //根据批次号查询批次详情信息
        console.log(this.orderdata);
        console.log(item.$attrs.index);
        this.index = item.$attrs.index;
        this.data = this.orderdata[item.$attrs.index].children;
      },
      searchorder(){
        this.loading=true;
        this.formdata["userId"] = this.userId;
        this.formdata["roleId"] = this.roleId;
        this.page.currentPage=1;
        getlistdata(this.page.currentPage,this.page.pageSize,Object.assign(this.formdata, this.query)).then(res=>{
            console.log(res);
            if(res.data.code==200){
              this.orderdata = res.data.data.data;
              this.page.total = res.data.data.count;
              if(this.orderdata.length>0){
                this.data = res.data.data.data[this.index].children;
              }else{
                this.data=[];
              }
            }else{
              this.$message.error("系统繁忙,刷新尝试");
            }
        })
      },
      cleanorder(){
        this.loading=true;
        this.formdata={};
        this.formdata["userId"] = this.userId;
        this.formdata["roleId"] = this.roleId;
        this.page.currentPage=1;
        getlistdata(this.page.currentPage,this.page.pageSize,Object.assign(this.formdata, this.query)).then(res=>{
           this.loading=false;
           if(res.data.code==200){
            this.orderdata = res.data.data.data;
             this.page.total = res.data.data.count;
              if(this.orderdata.length>0){
                this.data = res.data.data.data[this.index].children;
              }else{
                this.data=[];
              }
           }else{
              this.$message.error(res.data.msg);
           }
        })
      }
    }
}

</script>

<style>
  .el-tabs__nav-scroll .el-tabs__nav.is-left{
    height:100vh !important;
    overflow-y:auto !important;
    overflow-x:hidden;
  }
  .shopcarmx{
    width: 60% !important;
    height: 30vh !important;
    overflow: hidden;
    overflow-y: auto;
}
.container .el-form-item__label{
  font-size: 12px !important;
}
.container .el-input{
  width: 50% !important;
}
.box-body .el-input{
  width: 100% !important;
}
.onecn{
  display: inline-block;
  width: 20px;  
  margin: 0 auto;  
  line-height: 24px;  
}
</style>